'use client';

import React, { useState, useRef, useEffect } from 'react';

interface SliderCaptchaProps {
  onSuccess: () => void;
}

const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onSuccess }) => {
  const [sliderPosition, setSliderPosition] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const [targetPosition] = useState(Math.floor(Math.random() * 150) + 100); // 随机目标位置
  const sliderRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleMouseDown = (e: React.MouseEvent) => {
    if (isSuccess) return;
    setIsDragging(true);
  };

  const handleTouchStart = (e: React.TouchEvent) => {
    if (isSuccess) return;
    setIsDragging(true);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging || isSuccess) return;

    const containerRect = containerRef.current?.getBoundingClientRect();
    if (!containerRect) return;

    const maxWidth = containerRect.width - 40; // 40px是滑块宽度
    const newPosition = Math.max(0, Math.min(maxWidth, e.clientX - containerRect.left - 20));
    
    setSliderPosition(newPosition);
  };

  const handleTouchMove = (e: TouchEvent) => {
    if (!isDragging || isSuccess) return;
    
    const touch = e.touches[0];
    const containerRect = containerRef.current?.getBoundingClientRect();
    if (!containerRect) return;

    const maxWidth = containerRect.width - 40;
    const newPosition = Math.max(0, Math.min(maxWidth, touch.clientX - containerRect.left - 20));
    
    setSliderPosition(newPosition);
  };

  const handleMouseUp = () => {
    if (!isDragging) return;
    setIsDragging(false);
    
    // 检查是否接近目标位置
    if (Math.abs(sliderPosition - targetPosition) < 15) {
      setIsSuccess(true);
      onSuccess();
    } else {
      // 失败，滑块回到起始位置
      setSliderPosition(0);
    }
  };

  useEffect(() => {
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.addEventListener('touchmove', handleTouchMove);
      document.addEventListener('touchend', handleMouseUp);
    } else {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('touchmove', handleTouchMove);
      document.removeEventListener('touchend', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('touchmove', handleTouchMove);
      document.removeEventListener('touchend', handleMouseUp);
    };
  }, [isDragging]);

  return (
    <div className="my-4">
      <div 
        ref={containerRef}
        className="relative h-10 bg-gray-200 rounded-md overflow-hidden"
      >
        {/* 目标位置指示器 */}
        <div 
          className="absolute top-0 bottom-0 w-[2px] bg-blue-500"
          style={{ left: `${targetPosition}px` }}
        />
        
        {/* 滑块 */}
        <div
          ref={sliderRef}
          className={`absolute top-0 bottom-0 w-10 flex items-center justify-center rounded cursor-pointer
            ${isSuccess ? 'bg-green-500 text-white' : 'bg-blue-500 text-white'}
            transition-colors duration-200`}
          style={{ left: `${sliderPosition}px` }}
          onMouseDown={handleMouseDown}
          onTouchStart={handleTouchStart}
        >
          {isSuccess ? '✓' : '→'}
        </div>
        
        {/* 文字提示 */}
        <div className="absolute inset-0 flex items-center justify-center text-sm text-gray-500 select-none pointer-events-none">
          {isSuccess ? '验证成功' : '滑动到蓝线位置完成验证'}
        </div>
      </div>
    </div>
  );
};

export default SliderCaptcha; 